<template>
	<view class="page-box">
		<!-- biaoti -->
		<view class="header-bg" :style="{ background: 'url(' + data.img + ')' }">
			<view class="nav-box">
				<cu-custom isBack class="head-title">
					<block slot="content"><text class="nav-title shopro-selector-rect">金卡会员</text></block>
				</cu-custom>
			</view>
			<!-- <image :src="data.img" mode="aspectFill" class="ww100" lazy-load style="width: 100vw;"></image> -->
		</view>
		<view class="ww100 flex justify-center flex-direction align-center" style="margin-top: 70rpx;">
			<view class="nav-card bg-img" v-if="data.goldencard_end">
				<view class="card-top">
					<view class="card-ico">
						<image src="../../static/imgs/logo/vip-member.png" mode="aspectFill"></image>
					</view>
					<view class="card-box">
						<text class="tit">{{ data.name }}</text>
						<text class="dec">已开通</text>
					</view>
					<view class="card-record" @click="goLook">
						<image src="../../static/imgs/logo/record.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="card-name" style="text-align: center; margin-top: -20rpx;">
					<text>{{ data.describe ? data.describe : '' }}</text>
				</view>
				<view class="card-time" style="margin-top: -6rpx;">
					<text class="time">有效期：{{ data.goldencard_start }}-{{ data.goldencard_end }}</text>
				</view>
			</view>
			<!-- <view class="nav-card bg-img" v-else>
				<view class="card-top">
					<view class="card-ico">
						<image src="../../static/imgs/logo/vip-member.png" mode="aspectFill"></image>
					</view>
					<view class="card-box">
						<text class="tit">{{data.name}}</text>
						<text class="decs">暂未开通金卡会员</text>
					</view>
				</view>
				<view class="card-name"><text class="text">{{data.describe ? data.describe: ''}}/text></view>
				<view class="card-time">
					<text class="price">
						<text>仅售￥</text>
						{{ data.money }}
					</text>
				</view>
			</view> -->
		</view>
		<!-- 内容展示区域 -->
		<!-- <view class="list-img"><image src="../../static/imgs/logo/vip_bg.png" mode="aspectFill"></image></view> -->
		<view class="list-box mt15">
			<view class="list">
				<view class="list-items" v-for="(item, index) in data.privilege" :key="index">
					<view class="items-ico"><image :src="item.image"></image></view>
					<view class="items-list">
						<text class="name">{{ item.title }}</text>
						<text class="title">{{ item.description }}</text>
					</view>
				</view>
				<!-- <view class="list-items">
					<view class="items-ico"><image src="../../static/imgs/logo/stay.png"></image></view>
					<view class="items-list">
						<text class="name">住宿券</text>
						<text class="title">开通金卡会员，赠送三张住宿券</text>
					</view>
				</view>
				<view class="list-items">
					<view class="items-ico"><image src="../../static/imgs/logo/therm.png"></image></view>
					<view class="items-list">
						<text class="name">温泉券</text>
						<text class="title">开通金卡会员，赠送十张温泉券</text>
					</view>
				</view>
				<view class="list-items">
					<view class="items-ico"><image src="../../static/imgs/logo/return.png"></image></view>
					<view class="items-list">
						<text class="name">返还券</text>
						<text class="title">每年返还600元代金券，连续五年返还</text>
					</view>
				</view>
				<view class="list-items">
					<view class="items-ico"><image src="../../static/imgs/logo/more.png"></image></view>
					<view class="items-list">
						<text class="name">更多</text>
						<text class="title">期待更多会员权益...</text>
					</view>
				</view> -->
			</view>
			<!-- privilege -->
			<rich-text :nodes="data.privilege"></rich-text>
			<!-- <u-parse :html="data.privilege"></u-parse> -->
		</view>
		<!-- 按钮展示区域 -->
		<view class="footer-btn">
			<view class="btn" v-if="data.goldencard_end" @click="goOrder">立即续费</view>
			<view class="btn" v-else @click="goOrder">立即开通会员</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageURL: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210804095319.png',
			flag: false,
			data: {}
		};
	},
	onLoad() {
		this.getMember();
	},
	onShow() {},
	methods: {
		getMember() {
			this.$apiBase('memberDetail', null).then(res => {
				this.data = res.data;
			});
		},
		goOrder() {
			var that = this;
			this.$apiBase('getMember', null).then(res => {
				let pay = res.data.pay_data;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: pay.timeStamp,
					nonceStr: pay.nonceStr,
					package: pay.package,
					signType: pay.signType,
					paySign: pay.paySign,
					success: function(res) {
						that.getMember();
						uni.showToast({
							title: '支付成功'
						});
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			});
		},
		// 跳转到记录页面
		goLook() {
			uni.navigateTo({
				url: 'record'
			});
		}
	}
};
</script>

<style lang="scss">
.page-box {
	width: 100vw;
	min-height: 100vh;
	background-color: #101010;
	.nav-card {
		width: 640rpx;
		height: 312rpx;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210802104720.png);
		position: relative;
		.card-top {
			display: flex;
			margin-top: 41rpx;
			margin-left: 30rpx;

			.card-ico {
				width: 70rpx;
				height: 70rpx;
				margin-right: 21rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.card-record {
				position: absolute;
				right: 0;
				top: 67rpx;
				width: 160rpx;
				height: 46rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.card-box {
				display: flex;
				flex-direction: column;

				.tit {
					font-size: 28rpx;
					font-weight: bold;
					color: #503911;
					margin-bottom: 16rpx;
				}

				.dec {
					width: 82rpx;
					height: 34rpx;
					border: 1rpx solid #beaa71;
					border-radius: 15rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #81693e;
					line-height: 30rpx;
					text-align: center;
				}

				.decs {
					font-size: 22rpx;
					font-weight: 500;
					color: #81693e;
					line-height: 32rpx;
				}
			}
		}

		.card-name {
			padding-top: 48rpx;

			text {
				font-size: 50rpx;
				font-weight: bold;
				color: #342406;
			}

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #342406;
				margin-left: 119rpx;
			}
		}

		.card-time {
			margin-left: 121rpx;
			padding-top: 28rpx;
			.price {
				font-size: 32rpx;
				font-weight: 500;
				color: #81693e;
				text {
					font-size: 22rpx;
				}
			}

			.time {
				font-size: 22rpx;
				font-weight: 500;
				color: #81693e;
				text-align: center;
			}
		}
	}
	.header-bg {
		height: 560rpx;

		.head-title {
			font-size: 34rpx;
			color: #fff;
			font-weight: bold;
		}
	}

	.list-box {
		padding-bottom: 150rpx;
		box-sizing: border-box;

		.list-img {
			width: 484rpx;
			height: 44rpx;
			margin: 65rpx 133rpx 55rpx 133rpx;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.list {
			.list-items {
				display: flex;
				margin-bottom: 60rpx;
				margin-left: 55rpx;

				.items-ico {
					width: 90rpx;
					height: 90rpx;
					margin-right: 40rpx;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.items-list {
					display: flex;
					flex-direction: column;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: #f5e6aa;
						margin-bottom: 25rpx;
					}

					.title {
						font-size: 26rpx;
						font-weight: bold;
						color: #b3b3b3;
					}
				}
			}
		}
	}

	.footer-btn {
		position: fixed;
		left: 0;
		bottom: 38rpx;
		width: 100%;
		height: 100rpx;

		.btn {
			width: calc(100% - 40rpx);
			height: 90rpx;
			background: linear-gradient(0deg, #f1e0b1, #fffaf0);
			border-radius: 45rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #5b451e;
			line-height: 90rpx;
			text-align: center;
		}
	}
}
</style>
